<template>
  <div>
    <div class="headaddress">
      <el-button
        :style="button"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="open"
      ></el-button>
      <div class="search">
        <el-input
          v-model="search"
          placeholder="输入搜索内容"
          clearable
        ></el-input>
      </div>
    </div>
    <div class="smallhead">
      {{ smallheader }}
      <el-button :style="button" type="danger" size="mini" @click="del">删除</el-button>
    </div>
    <div class="addresstable">
      <!-- .toLowerCase()把字符串转换成小写  -->
      <el-table
      size='mini'
        :data="
          tabledata.filter(
            (data) =>
              !search ||
              data.name.toLowerCase().includes(search.toLowerCase()) ||
              data.email.toLowerCase().includes(search.toLowerCase()) ||
              data.phone.toLowerCase().includes(search.toLowerCase())
          )
        "
        height="73vh"
        border
        stripe
        @selection-change="sel"
      >
 <el-table-column v-if="show" type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          fit="true"
          size="mini"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="detaildiv">
      <el-dialog title="好友添加" :visible.sync="addVisible">
        <div class="dialogform">
          <!-- {{libraryitem}} -->
          <el-form
            :model="addform"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="姓名">
              <el-input v-model="addform.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="addform.email"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="addform.phone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>

          <el-button type="primary" @click="add">新增</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible: false,
      search: "",
      button: "display:none",
      show:false,
      smallheader: "公共通讯录",
      tabledata: [],
      columns: [
        { label: "姓名", id: "name" },
        { label: "邮箱", id: "email" },
        { label: "电话", id: "phone" },
      ],
      addform: {
        name: "",
        email: "",
        phone: "",
      },
      select: [],
    };
  },

  methods: {
    del() {
      this.select.forEach((element1) => {
        // console.log(element1);
        this.tabledata.forEach((element2,index2) => {
            if (element1.name===element2.name&&element1.email===element2.email&&element1.phone===element2.phone) {
                this.tabledata.splice(index2,1)
            }
        });
      });
    },
    add() {
      this.tabledata.push(this.addform);
      this.addVisible = false;
    },
    sel(val) {
      this.select = val;
    },
    open() {
      this.addVisible = true;
    },
  },
  watch: {},
  created() {
    this.$http
      .get("/data/public.json")
      .then((result) => {
        // console.log(result.data.data);
        this.tabledata = result.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    //   sessionstorage监听
    window.addEventListener("setItem", () => {
      if (sessionStorage.getItem("treenode") == "public") {
        this.smallheader = "公共通讯录";
        this.button = "display:none";
        this.show=false;
        this.$http
          .get("/data/public.json")
          .then((result) => {
            // console.log(result.data.data);
            this.tabledata = result.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      if (sessionStorage.getItem("treenode") == "personal") {
        this.smallheader = "私人通讯录";
        this.button = "display:inline-block";
        this.show=true;
        this.$http
          .get("/data/personal.json")
          .then((result) => {
            // console.log(result.data.data);
            this.tabledata = result.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    });
  },
};
</script>

<style >
.headaddress {
  height: 40px;
  background: #b6caed;
}
.headaddress .el-button {
  margin: 6px 8px;
}
.smallhead {
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0px 5px;
  /* display:inline-block */
}
.smallhead .el-button {
  float: right;
  margin-right: 2px;
}
.search {
  display: block;
  float: right;
  margin: 5px;
}
.search .el-input__inner {
  height: 30px;
}
</style>